<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS Grid: Alignment Properties</title>
        <link rel="author" title="Azul Layout" href="https://azul.rs/" />
        <meta name="flags" content="" />
        <meta name="assert" content="CSS Grid should correctly align items using justify-items, align-items, justify-content, and align-content." />
        <style type="text/css">
            * { margin: 0; padding: 0; }
            body {
                width: 800px;
                height: 600px;
                padding: 20px;
                background: #2c3e50;
            }
            .wrapper {
                display: flex;
                flex-wrap: wrap;
            }
            .container {
                display: grid;
                width: 380px;
                height: 260px;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(3, 1fr);
                background: white;
                border: 3px solid #3498db;
                padding: 10px;
                margin-right: 15px;
                margin-bottom: 15px;
            }
            .item {
                width: 40px;
                height: 40px;
                background: #e74c3c;
            }
            .container-1 {
                justify-items: start;
                align-items: start;
            }
            .container-2 {
                justify-items: center;
                align-items: center;
            }
            .container-3 {
                justify-items: end;
                align-items: end;
            }
            .container-4 {
                justify-items: stretch;
                align-items: stretch;
            }
            .container-4 .item {
                width: auto;
                height: auto;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="container container-1">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div class="container container-2">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div class="container container-3">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div class="container container-4">
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
        </div>
    </body>
</html>
